import React from 'react';
import PropTypes from 'react';
import {ThemeContent,ThemeSize} from "./ThemeContent";
import {Header} from "./Header";
import SwitchPay from "./SwitchPay";

class ComponentsApp extends React.Component{
    state={
        theme:'gray',
        size:'small'
    }
    // static propTypes ={
    //     age: PropTypes.number,
    //     name: PropTypes.string,
    //     like: PropTypes.array,
    //     school: PropTypes.object,
    // }
    changeTheme= ()=>{
        this.setState({
            theme:this.state.theme=='gray'?'orange':'gray',
            size:this.state.size=='small'?'xx-large':'small',
        })
    }
    render() {
        return(
            <div className="theme">
                <ThemeContent.Provider value={this.state.theme}>
                    <h1>支付方式</h1>
                    <SwitchPay></SwitchPay>
                    <h2>{this.props.name}</h2>
                    <ThemeSize.Provider value={this.state.size}>
                        <Header></Header>
                    </ThemeSize.Provider>
                    <button onClick={this.changeTheme}>修改上下文</button>
                </ThemeContent.Provider>
            </div>
        )
    }
}

export default ComponentsApp;